<template>
  <div class="myTable">
    <el-row class="searchRow">
    <!--  <el-radio-group v-model="serviceType">
        <el-radio v-for="item in serviceTypes" v-bind:key="item.type" :label="item.type">{{item.name}}</el-radio>
      </el-radio-group>-->
      <el-select v-model="serviceType" placeholder="服务对象" clearable style="margin-right: 15px">
        <el-option
            v-for="item in serviceTypes"
            :key="item.type"
            :label="item.name"
            :value="item.type">
        </el-option>
      </el-select>

      <el-select v-model="itemType" placeholder="办理方式" clearable style="margin-right: 15px">
        <el-option
            v-for="item in categories"
            :key="item.type"
            :label="item.name"
            :value="item.type">
        </el-option>
      </el-select>
      <el-input style="width:200px" class="mr15"
                placeholder="关键字"
                prefix-icon="el-icon-search"
                v-model="itemName">
      </el-input>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>
    </el-row>
    <el-table :data="tableData.data" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'" >
      <el-table-column  type="index" label="NO" :index="indexMethod" width="60px"></el-table-column>
      <el-table-column  label="事项名称"  prop="matterName"></el-table-column>
      <el-table-column label="办理项名称" class="zhouText"  >
        <template slot-scope="scope">
          <el-link type="primary" :underline=false class="zhouText" @click="showDetail(scope.row)">{{scope.row.itemName}}</el-link>
          <!--<router-link to="/fourEvent/eventDetail/8a8ddb8c63d39d4b016402514fca00b6">{{scope.row.itemName}}</router-link>-->
        </template>
      </el-table-column>
      <el-table-column  width="340" >
        <template slot="header" slot-scope="scope" >
          <div class="title" id="eventCnt" >事项数量：{{scope.$index-1+tableData.rowsCount}}项目</div>
        </template>
        <template slot-scope="scope">
                  <span class="nowrap">
<!--
                    <el-tag effect="dark" class="myTag" v-for="item in categories" size="small" :key="item.type" :type="getTagType(scope.row,item.type)">{{item.name}}</el-tag>
-->
                    <span class="zhouTag" v-for="item in categories" :key="item.type" :class="getTagType(scope.row,item.type)">{{item.name}}</span>
                  </span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @current-change="query" style="margin-top: 25px"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>

    <el-dialog  width="60%" title="" :fullscreen=false class="fullDialog" :visible.sync="dialogVisible">
      <iframe id="frame-main" :src="url" v-on:load="load" >
      </iframe>
    </el-dialog>
  </div>
</template>

<script>
  /* eslint-disable no-unreachable */

  const categories = [
    {type: "", name: "全部"},
    {type: 2, name: "网上办"},
    {type: 3, name: "一次办"},
    {type: 1, name: "马上办"},
    {type: 4, name: "就近办"}];
  const serviceTypes = [{type: "", name: "全部"}, {type: 1, name: "法人服务"},  {type: 2, name: "个人服务"}];
  export default {
    name: "judgeFourEvent",
    data: function() {
      return {
        categories:categories,
        serviceTypes:serviceTypes,
        serviceType:"",
        itemType:"",
        itemName:"",
        tableData: {},
        dialogVisible:false,
        url:""
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      getTagType(row,itemType) {
        return row.itemType && row.itemType.indexOf(itemType)>-1?"success":"info";
      },
      query:function(pageNo){
        let vm = this;
        let data = {
          curPageNO:pageNo,
          pageSize:10,
          serviceType:vm.serviceType,
          itemType:vm.itemType,
          itemName:vm.itemName
        }
        this.$http.post("/yczmq/bigScreen/matter/page",window.changeDataType(data)).then(resp => {
          if(resp.status == 0){
            resp.data.data.forEach(n=>n.rowsCount = resp.data.rowsCount)
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.serviceType = 1;
        this.itemType = 2;
        this.itemName = "";
      },
      showDetail:function(item){
        window.open(item.itemUrl,"_blank");
        return;
        this.url = item.itemUrl;
        //this.url = item.itemUrl.replace("http://zwfw.hubei.gov.cn",location.origin);
        this.dialogVisible = true;
      },
      load: function () {
        var frames = document.getElementById("frame-main");
        var open = frames.contentWindow.open;
        frames.contentWindow.open = function (url) {
          open(url, "_self");
        }
        frames.contentWindow.bszn = function(transactCode,taskType){
          // newBsznPage(transactCode);
          //依职权
          if (taskType == "02" || taskType == "03" || taskType == "04" || taskType == "06") {
            if (sessionStorage.getItem("p_region_grade") != "2") {
              frames.contentWindow.open('/s/web/bszn/bsznpage.html?transactCode=' + transactCode + '&taskType=' + taskType,'_self');
            }else{
              frames.contentWindow.open('/s/web/bszn/bsznpage.html?transactCode=' + transactCode,'_self');
            }
          }else{
            frames.contentWindow.open('/s/web/bszn/bsznpage.html?transactCode=' + transactCode,'_self');
          }
          // window.open("/s/web/bszn/bsznpage.html?transactCode=" + transactCode);
        }
        frames.contentWindow.saveBrowseInformation = function () {
        };
        window.saveBrowseInformation = function(){

        }
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style>
  .zhouTag{
    display: inline-block;
    text-align: center;
    color: white;
    width:60px;
    border-radius:13px;
    white-space: nowrap;
  }
  .zhouTag+.zhouTag{
    margin-left: 5px;
  }
  .zhouTag.info{
    background:rgba(231,231,231,1);
  }
  .zhouTag.success{
    background:rgba(48,161,252,1);
    opacity:0.8495999999999999;
  }
</style>
<style scoped>

</style>